<template>
	<div>
		<canvas ref="canvas"></canvas>
	</div>
</template>

<script>
import { Game, GameObject,Component, resource, RESOURCE_TYPE, LOAD_EVENT } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'
import { Graphics, GraphicsSystem } from '@eva/plugin-renderer-graphics'
import { Img, ImgSystem } from '@eva/plugin-renderer-img';
export default {
	head: {
		title: '胡桃摇'
	},
	data(){
		return {
			game: null,
			resource: null
		}
	},
	created (){
		this.$nextTick(()=>{
			this.loadResource()
		})
	},
	destroyed(){
		if(this.game){
			this.game.destroy()
		}
		resource.destroy()
	},
	methods:{
		loadResource(){
			resource.addResource([
				{
					name: 'leftHand',
					type: RESOURCE_TYPE.IMAGE,
					src: {
						image: {
							type: 'png',
							url: '/images/左手.png'
						}
					},
					preload: true
				}
				// other resources
			])
			resource.on(LOAD_EVENT.COMPLETE, () => {
				this.start()
			})
			resource.preload()
		},
		start(){
			let game = new Game({
				systems: [ // 游戏添加渲染系统
					new RendererSystem({
						canvas: this.$refs.canvas,
						width: 1200,
						height: 800,
					}),
					// 游戏图形系统
					new GraphicsSystem(),
					new ImgSystem()
				],
			});
			// 容器
			let container = new GameObject("container",{
				size: {
					width: 400,
					height: 400
				},
				position: {
					x: 600,
					y: 300
				},
				origin: {
					x: 0.5,
					y: 0.5
				}
			})
			let containerGraphics = container.addComponent(new Graphics())
			containerGraphics.graphics.beginFill(0xde3249, 1)
			containerGraphics.graphics.drawRoundedRect(0, 0, 400, 400, 12)
			containerGraphics.graphics.endFill()
			// 身体
			let body = new GameObject("body",{
				size: {
					width: 200,
					height: 200
				},
				position: {
					x: 200,
					y: 280
				},
				origin: {
					x: 0.5,
					y: 0.5
				}
			})
			let bodyGraphics = body.addComponent(new Graphics())
			bodyGraphics.graphics.beginFill(0xd21249, 1)
			bodyGraphics.graphics.drawRoundedRect(0, 0, 200, 200, 12)
			bodyGraphics.graphics.endFill()
			container.addChild(body)
			// 脑袋
			let header = new GameObject("header",{
				size: {
					width: 150,
					height: 150
				},
				position: {
					x: 100,
					y: -50
				},
				origin: {
					x: 0.5,
					y: 0.5
				}
			})
			let headerGraphics = header.addComponent(new Graphics())
			headerGraphics.graphics.beginFill(0xd21249, 1)
			headerGraphics.graphics.drawRoundedRect(0, 0, 150, 150, 75)
			headerGraphics.graphics.endFill()
			// 眨眼组件
			class BlinkEye extends Component {
				static componentName = 'BlinkEye';
				speed = {
					// 移动速度
					x: 100,
					y: 200,
				};

				init(obj) {
					Object.assign(this, obj);
				}
				update(e) {
					let t = e.time/1000 % 10
					if(t>=9 && t<=9.3){
						if(t>9.15){
							this.gameObject.transform.scale.y = 0.2 + 0.8*(t-9.15)/0.15
						}else{
							this.gameObject.transform.scale.y = 1 - 0.8*(t-9)/0.15
						}
					}
				}
				onPause() {
					this.oldSpeed = this.speed;
					this.speed = {
						x: 0,
						y: 0,
					};
				}
				onPlay() {
					this.speed = this.oldSpeed;
				}
			}
			// 左眼
			let leftEye = new GameObject("leftEye",{
				size: {
					width: 15,
					height: 15
				},
				position: {
					x: 50,
					y: 50
				},
				origin: {
					x: 0.5,
					y: 0.5
				},
				scale:{
					x: 1,
					y: 1
				}
			})
			let leftEyeGraphics = leftEye.addComponent(new Graphics())
			leftEyeGraphics.graphics.beginFill(0x000000, 1)
			leftEyeGraphics.graphics.arc(0, 0, 15,0,360)
			leftEyeGraphics.graphics.endFill()
			leftEye.addComponent(new BlinkEye())
			header.addChild(leftEye)

			// 右眼
			let rightEye = new GameObject("rightEye",{
				size: {
					width: 15,
					height: 15
				},
				position: {
					x: 100,
					y: 50
				},
				origin: {
					x: 0.5,
					y: 0.5
				},
				scale:{
					x: 1,
					y: 1
				}
			})
			let rightEyeGraphics = rightEye.addComponent(new Graphics())
			rightEyeGraphics.graphics.beginFill(0x000000, 1)
			rightEyeGraphics.graphics.arc(0, 0, 15,0,360)
			rightEyeGraphics.graphics.endFill()
			rightEye.addComponent(new BlinkEye())
			header.addChild(rightEye)

			body.addChild(header)
			// 手臂晃动组件
			class ShakeHand extends Component {
				static componentName = 'ShakeHand';
				speed = {
					// 移动速度
					x: 100,
					y: 200,
				};
				oldx = 0;
				oldy = 0;
				angle = 0;
				init(obj) {
					Object.assign(this, obj);
				}
				update(e) {
					if(!this.oldx){
						this.oldx = this.gameObject.transform.position.x
					}
					if(!this.oldy){
						this.oldy = this.gameObject.transform.position.y
					}
					// 每秒 N 像素
					// console.log(e)
					const position = this.gameObject.transform.position;
					let r = 20;
					let v = 15;
					if(this.angle > 360){v=0}
					this.angle = (this.angle + (e.deltaTime / 1000 * v))%360
					let nx = Math.sin(this.angle%360)*r;
					let ny = Math.cos(this.angle%360)*r;
					this.gameObject.transform.position.x = this.oldx+nx;
					this.gameObject.transform.position.y = this.oldy+ny;
				}
				onPause() {
					this.oldSpeed = this.speed;
					this.speed = {
						x: 0,
						y: 0,
					};
				}
				onPlay() {
					this.speed = this.oldSpeed;
				}
			}
			// 左臂
			let leftHand = new GameObject("leftHand",{
				size: {
					width: 50,
					height: 100
				},
				position: {
					x: 200,
					y: 100
				},
				origin: {
					x: 0.5,
					y: 0.5
				}
			})
			leftHand.addComponent(new Img({
				resource: 'leftHand'
			}))
			leftHand.addComponent(new ShakeHand())
			body.addChild(leftHand)
			// 右臂
			let rightHand = new GameObject("rightHand",{
				size: {
					width: 50,
					height: 100
				},
				position: {
					x: 0,
					y: 100
				},
				origin: {
					x: 0.5,
					y: 0.5
				}
			})
			let rightHandGraphics = rightHand.addComponent(new Graphics())
			rightHandGraphics.graphics.beginFill(0xe21249, 1)
			rightHandGraphics.graphics.drawRect(0, 0, 50, 100)
			rightHandGraphics.graphics.endFill()
			rightHand.addComponent(new ShakeHand())
			body.addChild(rightHand)
			game.scene.addChild(container)
			this.game = game
		}
	}
}
</script>